<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,body {
            width: 100%;
            height: 100%;
            text-align: center;
            overflow: hidden;
            background-color: #E0E0E0;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

        /*闹钟列表页*/
        .alarmList {
            width: 100%;
            text-align: center;
            padding-top: calc(5vW);
        }

        .alarm {
            background-color: #FFFFFF;
            width: 90%;
            height: calc(20vW);
            border-radius: 20px;
            margin: 0 auto;
        }

        .alarmL {
            height: 100%;
            width: 80%;
            float: left;
        }

        .alarmUp {
            height: 55%;
            width: 100%;
            padding-top: 20px;
        }

        .alarmL span {
            float: left;
        }

        .alarmUpTime {
            font-size: calc(9vW);
            font-family: Arial;
            color: #555555;
            padding-left: 20px;
            margin-right: 20px;
        }

        .alarmUpDesc {
            font-size: calc(7vW);
            font-family: Arial;
            color: #555555;
        }

        .alarmDown {
            font-size: calc(4vW);
            font-family: Arial;
            color: #555555;
            padding-left: 30px;
        }

        .alarmR {
            height: 100%;
            width: 20%;
            float: right;
            padding-top: calc(6vW);
        }

        /*复选框*/
        input[type="checkbox"] {
            display: none;

        }

        .check-trail {
            display: flex;
            align-items: center;
            width: 9em;
            height: 5em;
            background: #E0E0E0;
            border-radius: 3em;
            transition: all 0.5s ease;
            cursor: pointer;
        }

        .check-handler {
            display: flex;
            margin-left: 0.5em;
            justify-content: center;
            align-items: center;
            width: 4em;
            height: 4em;
            background: #555555;
            border-radius: 50%;
            transition: all 0.5s ease;
            box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
        }

        .check-handler:before {
            content: "OFF";
            color: white;
            font-size: 1.5em;
            font-weight: bold;
            font-family: Arial;
        }

        .alarmCkeck:checked+.check-trail {
            background: #16a085;
        }

        .alarmCkeck:checked+.check-trail .check-handler {
            margin-left: 50%;
            background: #1abc9c;
        }

        .alarmCkeck:checked+.check-trail .check-handler::before {
            content: "ON";
            font-family: Arial;
        }

        .addDIV {
            width: 80vW;
            height: 20vh;
            margin: 65vh auto 0 auto;
        }

        .addBut {
            border: 1px solid;
            width: calc(15vh);
            height: calc(15vh);
            border-radius: 50%;
            color: #ccc;
            transition: color .25s;
            position: relative;
            margin: 0 auto;
        }

        .addBut::before {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            width: 80px;
            margin-left: -40px;
            margin-top: -5px;
            border-top: 10px solid;
        }

        .addBut::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            height: 80px;
            margin-left: -5px;
            margin-top: -40px;
            border-left: 10px solid;
        }

        .alarmSet {
            width: 100%;
            height: 160vW;
            border-top-left-radius: calc(4vW + 40px);
            border-top-right-radius: calc(4vW + 40px);
            background: rgb(255, 255, 255);
            position: fixed;
            left: 0;
            right: 0;
            bottom: -160vW;
            margin: 0 auto;
            text-align: center;
        }

        @keyframes slideUp {
            from {
                bottom: -160vW;
            }

            to {
                bottom: 0;
            }
        }

        @keyframes slideDown {
            from {
                bottom: 0;
            }

            to {
                bottom: -160vW;
            }
        }

        .alarmTitle {
            width: 90%;
            height: 80px;
            border-radius: 40px;
            border: 1px solid #555555;
            font-size: 50px;
            font-family: Arial;
            color: #555555;
            padding-left: 40px;
            margin: calc(5vW);
            box-sizing: border-box;
        }

        input:focus {
            border: none;
            outline: none;
            box-shadow: 0 0 0 1px #2ecc71, 0 0 0 1px #BDE7FF;
        }

        .alarmTime>div {
            display: inline;
        }

        .alarmTime {
            width: calc(100vW);
            height: 100px;
            margin-bottom: calc(5vW);
        }

        .alarmTime span {
            font-size: 80px;
            font-family: Arial;
            color: #555555;
        }





        #canvasDIV {
            width: calc(100vW);
            height: calc(90vW);
            margin: 0 auto;
        }

        .week {
            width: calc(90vW);
            margin: auto;
            display: flex;
            justify-content: space-between;
            margin-top: calc(5vW);
        }

        .week>[type="checkbox"]+label {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            font-size: 66px;
            font-family: Arial;
            background-color: #C2C2C2;
            color: #555555;
        }

        .week>input[type="checkbox"]:checked+label {
            background-color: #2ecc71;
            color: white;
        }
    </style>
</head>

<body>
    <div id="alarmList" class="alarmList">
        <div class="alarm">
            <div class="alarmL">
                <div class="alarmUp">
                    <span class="alarmUpTime">08:30</span>&nbsp;&nbsp;
                    <span class="alarmUpDesc">按时吃饭</span>
                </div>
                <div class="alarmDown">
                    <span>周一 周二 周三 周四 周五 周六</span>
                </div>
            </div>
            <div class="alarmR">
                <input id="chck" type="checkbox" class="alarmCkeck">
                <label for="chck" class="check-trail">
                    <span class="check-handler"></span>
                </label>
            </div>
        </div>
    </div>
    <div class="addDIV">
        <div class="addBut" id="addBut"></div>
    </div>

    <div id="alarmSet" class="alarmSet">
        <input type="text" placeholder="闹钟标题" value="" id="alarmTitle" name="alarmTitle" class="alarmTitle">
        <div class="alarmTime">
            <div class="hourNum">
                <span id="hourSpan">00</span>
                <span>点</span>
            </div>
            <div class="minuteNum">
                <span id="minuteSpan">00</span>
                <span>分</span>
            </div>
        </div>
        <br>
        <div id="canvasDIV" οnmοusemοve="move();">
            <canvas id="myCanvas" width="100%"></canvas>
        </div>
        <div class="week">
            <input type="checkbox" name='myCheckbox' id="Monday" />
            <label for="Monday">一</label>
            <input type="checkbox" name='myCheckbox' id="Tuesday" />
            <label for="Tuesday">二</label>
            <input type="checkbox" name='myCheckbox' id="Wednesday" />
            <label for="Wednesday">三</label>
            <input type="checkbox" name='myCheckbox' id="Thursday" />
            <label for="Thursday">四</label>
            <input type="checkbox" name='myCheckbox' id="Friday" />
            <label for="Friday">五</label>
            <input type="checkbox" name='myCheckbox' id="Saturday" />
            <label for="Saturday">六</label>
            <input type="checkbox" name='myCheckbox' id="Sunday" />
            <label for="Sunday">日</label>
        </div>
    </div>
</body>
<script>
    
    var close = document.getElementById("alarmList");
    var alarmSet = document.getElementById("alarmSet");
    var addBut = document.getElementById("addBut");
    document.onclick = function () {
        alarmSet.style.animation = "slideDown 0.5s 1 normal forwards";
        addBut.style.opacity = "1";
    };
    close.addEventListener("click", function () {
        alarmSet.style.animation = "slideDown 0.5s 1 normal forwards";
        addBut.style.opacity = "1";
    });
    addBut.addEventListener("click", function (e) {
        stopFunc(e);
        alarmSet.style.animation = "slideUp 0.5s 1 normal forwards";
        addBut.style.opacity = "0.5";
    }, false);
    alarmSet.addEventListener("click", function (e) {
        stopFunc(e);
    }, false);
    //阻止事件向下传递
    function stopFunc(e) {
        e.stopPropagation() ? e.stopPropagation() : e.cancelBubble = true;
    }
    var ctx;
    var _width = document.documentElement.clientWidth * 0.9;//页面宽度的80%
    var minuteX = _width / 2;//设置初始坐标
    var minuteY = _width / 9;
    var minuteText = '00';//设置初始值
    var minuteFlag = false;//是否被点击
    var hourX = _width / 2;
    var hourY = _width / 3;
    var hourText = '00';
    var hourFlag = false;
    //小点半径_width / 11
    //分钟圆圈圆心所在圆半径7/18 * _width
    //小时圆圈圆心所在圆半径1/6 * _width
    crtView();
    function crtView() {
        var myCanvas = document.getElementById("myCanvas");//
        myCanvas.width = _width;//
        myCanvas.height = _width;
        ctx = myCanvas.getContext("2d");//
        ctx.clearRect(0, 0, _width, _width);//
        //大圆
        ctx.fillStyle = '#FCFCFC';//底色
        ctx.beginPath();//起始一条路径，或重置当前路径
        ctx.arc(_width / 2, _width / 2, _width / 2, 0, 2 * Math.PI, true);
        ctx.fill();
        var grd = ctx.createRadialGradient(_width / 2, _width / 2, _width / 2 - 20, _width / 2, _width / 2, _width / 1.5);//加阴影
        grd.addColorStop(1, "black");
        grd.addColorStop(0, "white");
        ctx.fillStyle = grd;
        ctx.fill();
        //小圆
        ctx.fillStyle = '#3C3C3C';//底色
        ctx.beginPath();//起始一条路径，或重置当前路径
        ctx.arc(_width / 2, _width / 2, _width * 5 / 18, 0, 2 * Math.PI, true);
        ctx.fill();
        //分
        ctx.fillStyle = '#3C3C3C';//底色
        ctx.beginPath();//起始一条路径，或重置当前路径
        ctx.arc(minuteX, minuteY, _width / 11, 0, 2 * Math.PI, true);
        ctx.fill();
        ctx.fillStyle = '#FCFCFC'//颜色
        ctx.font = _width / 11 + "px Arial";//字号
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText(minuteText, minuteX, minuteY);

        //小时
        ctx.fillStyle = '#FCFCFC';//底色
        ctx.beginPath();//起始一条路径，或重置当前路径
        ctx.arc(hourX, hourY, _width / 11, 0, 2 * Math.PI, true);
        ctx.fill();
        ctx.fillStyle = '#3C3C3C'//颜色
        ctx.font = _width / 11 + "px Arial";//字号
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText(hourText, hourX, hourY);
    }
    //文档就绪函数
    onload = function (e) {

        var top1 = document.getElementById("canvasDIV").getBoundingClientRect().top;
        
        var top = top1 - document.body.clientWidth * 1.6;
        
        document.addEventListener("touchstart", function (evt) {

            var touch = evt.touches[0];
            if ((minuteX - _width / 13) < parseInt(touch.pageX) - _width / 20 && parseInt(touch.pageX) - _width / 20 < (minuteX + _width / 13) && (minuteY - _width / 13 < parseInt(touch.pageY) - top) && (minuteY + _width / 13 > parseInt(touch.pageY) - top)) {
                minuteFlag = true;
            }
            if ((hourX - _width / 13) < parseInt(touch.pageX) - _width / 20 && parseInt(touch.pageX) - _width / 20 < (hourX + _width / 13) && (hourY - _width / 13 < parseInt(touch.pageY) - top) && (hourY + _width / 13 > parseInt(touch.pageY) - top)) {
                hourFlag = true;
            }
        }, false);
        document.addEventListener("touchmove", function (evt) {
            var touch = evt.touches[0];
            end_x = parseInt(touch.pageX),
                end_y = parseInt(touch.pageY);
            if (minuteFlag) {
                var r = Math.atan2(_width / 2 - end_y + top, end_x - _width * 6 / 10);
                if (r < 0) {
                    r = Math.PI * 2 + r
                }
                var angleNum = r * 180 / Math.PI;
                var minuteNum = Math.floor(angleNum / 6);
                var remainder = angleNum % 6;
                if (remainder >= 3) {
                    minuteNum++;
                }
                if (minuteText != minuteNum) {
                    minuteText = 75 - minuteNum;
                    if (minuteText >= 60) {
                        minuteText = minuteText - 60;
                    }

                    var radian = minuteNum * 6 * Math.PI / 180;//弧度
                    if (radian > Math.PI) {
                        radian = -(2 * Math.PI - radian)
                    }
                    minuteY = _width / 2 - Math.sin(minuteNum * 6 * Math.PI / 180) * 7 / 18 * _width;
                    minuteX = _width / 2 + Math.cos(minuteNum * 6 * Math.PI / 180) * 7 / 18 * _width;
                   
                    crtView(ctx);
                    var minuteSpan = document.getElementById("minuteSpan");
                    minuteSpan.innerHTML = minuteText;
                }
            }
            if (hourFlag) {
                var r = Math.atan2(_width / 2 - end_y + top, end_x - _width * 6 / 10);
                if (r < 0) {
                    r = Math.PI * 2 + r
                }
                var angleNum = r * 180 / Math.PI;
                var hourNum = Math.floor(angleNum / 15);
                var remainder = angleNum % 15;
                if (remainder >= 8) {
                    hourNum++;
                }
                if (hourText != hourNum) {
                    hourText = 30 - hourNum;
                    if (hourText >= 24) {
                        hourText = hourText - 24;
                    }

                    var radian = hourNum * 15 * Math.PI / 180;//弧度
                    if (radian > Math.PI) {
                        radian = -(2 * Math.PI - radian)
                    }
                    hourY = _width / 2 - Math.sin(hourNum * 15 * Math.PI / 180) * 1 / 6 * _width;
                    hourX = _width / 2 + Math.cos(hourNum * 15 * Math.PI / 180) * 1 / 6 * _width;
                    
                    crtView(ctx);
                    var hourSpan = document.getElementById("hourSpan");
                    hourSpan.innerHTML = hourText;
                }
            }
        }, false);
        document.addEventListener("touchend", function (evt) {

            minuteFlag = false;
            hourFlag = false;

        }, false);
    }
</script>

</html>